<template>
	<div class="flow-diagram-container">
		<!-- 动态流程图 - 基于groupsData -->
		<div class="vertical-workflow-chart" v-if="Object.keys(groupsData).length > 0">
			<!-- 动态生成各组节点 -->
			<div class="workflow-groups">
				<!-- 遍历每个组 -->
				<div v-for="(actions, groupName, groupIndex) in groupsData" :key="groupName" class="group-block">
					<!-- 组节点 - 颜色根据执行状态变化 -->
					<div class="node group-node" :class="{
							'completed-node': isNodeCompleted(groupName, groupIndex),
							'active-node': activeGroup === groupName,
							'pending-node': isNodePending(groupName, groupIndex)
						}">
						{{ groupName }}

						<!-- 组内动作列表 -->
						<div class="actions-list">
							<div v-for="(actionName, actionIndex) in actions" :key="actionIndex" class="action-item-container">
								<div class="action-item" :class="{
									'completed-action': getActionState(groupName, actionName, groupIndex) === 'completed',
									'active-action': getActionState(groupName, actionName, groupIndex) === 'active',
									'running-action': getActionState(groupName, actionName, groupIndex) === 'running',
									'pending-action': getActionState(groupName, actionName, groupIndex) === 'pending'
								}">
									{{ actionName }}
								</div>
								<!-- 动作之间的箭头，最后一个动作不显示 -->
								<div class="action-arrow" v-if="actionIndex < actions.length - 1">
									<!-- <div style="width:2px;height: 24px;background-color: #333;"></div> -->
									<svg width="12" height="100%">
										<path d="M6,0 L6,8 L3,8 L6,12 L9,8 L6,8" fill="none" stroke="#333" stroke-width="1.5" />
									</svg>
								</div>
							</div>
							<div v-if="actions.length === 0" class="no-actions">
								暂无动作
							</div>
						</div>
					</div>

					<!-- 箭头 -->
					<div class="arrow-down" v-if="groupIndex < Object.keys(groupsData).length - 1">
						<!-- <svg width="16" height="16">
							<path d="M8,0 L8,10 L4,10 L8,16 L12,10 L8,10" fill="none" stroke="#333"
								stroke-width="1.5" />
						</svg> -->
					</div>
				</div>
			</div>
		</div>

		<!-- 无数据时显示加载提示 -->
		<div v-else class="no-data-message">
			<div class="loading-spinner"></div>
			<div class="loading-text">加载工作流程图数据...</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted,
		reactive,
		computed,
		onUnmounted
	} from 'vue';
	import api from '../api/api';

	// 当前活动组和动作
	const activeGroup = ref(null);
	const activeAction = ref(null);
	// 已完成的动作列表
	const completedActions = ref([]);

	const groupResponse = ref([]);
    const actionList = ref([]);
	// 存储所有action的详细数据
	const actionsDetailList = ref([]);
	// 存储每个动作的执行状态 (Pending/Running/Successed)
	const actionPhases = ref({});
	// 定时更新状态的定时器
	let statusUpdateTimer = null;
	// 定时更新间隔(毫秒)
	const UPDATE_INTERVAL = 5000; // 5秒更新一次

	// 存储处理后的分组数据
	const groupsData = reactive({
		// 格式为: { "组描述": ["动作1描述", "动作2描述", ...] }
	});

	// 获取groupsData中组名的数组（顺序重要）
	const groupNames = computed(() => Object.keys(groupsData));

	// 判断节点是否已完成（在activeGroup之前的节点）
	const isNodeCompleted = (groupName, groupIndex) => {
		if (!activeGroup.value) return false;

		const activeIndex = groupNames.value.indexOf(activeGroup.value);
		return activeIndex > -1 && groupIndex < activeIndex;
	};

	// 判断节点是否待执行（在activeGroup之后的节点）
	const isNodePending = (groupName, groupIndex) => {
		if (!activeGroup.value) return true; // 如果没有activeGroup，所有节点都是待执行状态

		const activeIndex = groupNames.value.indexOf(activeGroup.value);
		return activeIndex > -1 && groupIndex > activeIndex;
	};

	// 判断动作是否已完成
	const isActionCompleted = (groupName, actionName) => {
		// 优先使用actionPhases中的状态
		if (actionPhases.value[actionName] === 'Successed') {
			return true;
		}

		// 如果没有在actionPhases中找到，使用旧的判断逻辑
		return completedActions.value.includes(actionName) ||
			(groupName !== activeGroup.value && isNodeCompleted(groupName, groupNames.value.indexOf(groupName)));
	};

	// 判断动作是否待执行
	const isActionPending = (groupName, actionName, groupIndex) => {
		// 优先使用actionPhases中的状态
		if (actionPhases.value[actionName] === 'Pending') {
			return true;
		}

		// 如果没有在actionPhases中找到，使用旧的判断逻辑
		// 如果不在当前组中，且组是待执行状态，则动作也是待执行状态
		if (groupName !== activeGroup.value && isNodePending(groupName, groupIndex)) {
			return true;
		}

		// 如果在当前组中，但不是当前动作，且未完成，则是待执行状态
		if (groupName === activeGroup.value && actionName !== activeAction.value && !completedActions.value.includes(
				actionName) && actionPhases.value[actionName] !== 'Running') {
			return true;
		}

		return false;
	};

	// 判断动作是否正在执行
	const isActionRunning = (actionName) => {
		return actionPhases.value[actionName] === 'Running';
	};

	// 修改获取动作状态的优先级，避免不必要的状态变化
	const getActionState = (groupName, actionName, groupIndex) => {
		const phase = actionPhases.value[actionName];
		if (phase === 'Successed') return 'completed';
		if (phase === 'Running') return 'running';
		if (phase === 'Pending') return 'pending';

		// 如果没有phase，使用默认逻辑
		if (isActionCompleted(groupName, actionName)) return 'completed';
		if (activeAction.value === actionName) return 'active';
		return 'pending';
	};

	// 添加props接收从TaskDistribution传递的itemData
	const props = defineProps({
		itemData: {
			type: Object,
			default: () => ({})
		},
		isGalaxea: {
			type: Boolean,
			default: false
		}
	});

	// 获取各组的动作数据
	const getActionPhase = async () => {
		// 清空actionList
		actionList.value = [];

		// 存储所有actions的Name和Namespace
		const actionsData = [];

		// 检查groupResponse是否包含数据
		if (!Array.isArray(groupResponse.value) || groupResponse.value.length === 0) {
			return [];
		}


		// 循环遍历groupResponse中的每一条数据
		for (const group of groupResponse.value) {
			// 确保group对象有name和namespace属性
			if (!group || !group.Name || !group.Namespace) {
				continue;
			}

			// 构建请求参数
			const params = {
				Name: group.Name,
				Namespace: group.Namespace
			};

			try {
				// 调用API获取该组的详细数据
				const response = await api.getGroupsData({
					params
				}, baseURL.value);

				// 将获取到的数据添加到actionList中
				if (response.data) {
					actionList.value.push(response.data);

					// 从response.data.status.actions中提取Name和Namespace
					// status.actions是一个对象，其中键是动作名称（如A1、A2），值是动作详情
					if (response.data.status && response.data.status.actions) {
						const actions = response.data.status.actions;

						// 遍历对象的所有键
						Object.keys(actions).forEach(actionKey => {
							console.log('actionKey:', actionKey)
							// 提取名称中的基本部分和后缀
							const fullName = response.data.name;
							const nameParts = fullName.split('-');
							const basePart = nameParts[0]; // 例如 T1.G1
							const suffix = nameParts.slice(1).join('-'); // 获取完整后缀: 20250419T173430-5a51a
							// 正确构建action名称: T1.G1.A2-20250419T173430-5a51a 格式
							const actionName = `${basePart}.${actionKey}-${suffix}`;
							console.log('actionName:', actionName)
							const actionData = {
								Name: actionName,
								Namespace: response.data.namespace
							};
							actionsData.push(actionData);
							console.log(`提取动作: ${actionKey}, 构建名称: ${actionName}`);
						});
					}
				}
			} catch (error) {
				console.error('获取组数据失败:', error);
			}
		}


		// 获取每个action的详细数据
		getActionsDetail(actionsData)
			.then(() => {
				// 获取完详细数据后，启动状态自动更新
				startStatusUpdates();
			});

		return actionsData;
	}

	// 获取每个action的详细数据
	const getActionsDetail = async (actionsData) => {
		// 清空actionsDetailList
		actionsDetailList.value = [];
		// 清空actionPhases对象
		actionPhases.value = {};

		console.log('开始获取Actions详细数据，共', actionsData.length, '条');

		// 循环遍历actionsData中的每一条数据
		for (const action of actionsData) {
			// 确保action对象有Name和Namespace属性
			if (!action || !action.Name || !action.Namespace) {
				console.warn('跳过无效的action数据:', action);
				continue;
			}

			// 构建请求参数
			const params = {
				Name: action.Name,
				Namespace: action.Namespace
			};
			console.log('获取action详细数据参数:', params);

			try {
				// 调用API获取该action的详细数据
				const response = await api.getActionsData({
					params
				}, baseURL.value);
				console.log('获取action详细数据响应:', response.data);

				// 将获取到的数据添加到actionsDetailList中
				if (response.data) {
					actionsDetailList.value.push(response.data);

					// 提取动作描述和执行状态，存储到actionPhases中
					if (response.data.spec?.desc?.docs && response.data.status?.phase) {
						const actionName = response.data.spec.desc.docs;
						const phase = response.data.status.phase;
						actionPhases.value[actionName] = phase;

						console.log(`动作 [${actionName}] 的执行状态: ${phase}`);

						// 如果动作处于Running状态，将其设为当前活动动作
						if (phase === 'Running') {
							activeAction.value = actionName;
							// 找到该动作所属的组，设为当前活动组
							const groupDescRegex = /^(.*?)\.A\d+/; // 匹配组名部分
							const match = response.data.name.match(groupDescRegex);
							if (match && match[1]) {
								// 查找对应的groupsData中的组描述
								for (const groupData of actionList.value) {
									if (groupData.name && groupData.name.startsWith(match[1])) {
										// 根据组名查找对应的组描述
										if (groupData.spec?.desc?.docs) {
											activeGroup.value = groupData.spec.desc.docs;
											break;
										}
									}
								}
							}
						}

						// 如果动作处于Successed状态，添加到已完成列表
						if (phase === 'Successed' && !completedActions.value.includes(actionName)) {
							completedActions.value.push(actionName);
						}
					}
				}
			} catch (error) {
				console.error('获取action详细数据失败:', error);
			}
		}

		console.log('所有action详细数据:', actionsDetailList.value);
		console.log('动作执行状态映射:', actionPhases.value);
		console.log('当前活动组:', activeGroup.value);
		console.log('当前活动动作:', activeAction.value);
		console.log('已完成动作:', completedActions.value);

		return actionsDetailList.value;
	}

	// 处理spec.groups数据，提取desc.docs,没有接口调用
	const processGroupsData = (data) => {
		if (!data || !data.spec || !data.spec.groups) {
			console.log('数据中没有spec.groups:', data);
			return {};
		}

		const result = {};
		const groups = data.spec.groups;
		// 根绝parents与name进行拓扑排序

		// 遍历每个组
		groups.forEach(group => {
			if (group && group.desc && group.desc.docs) {
				const groupKey = group.desc.docs; // 组描述作为键
				const actionsArray = []; // 存储该组下所有动作描述
				// 遍历该组下的所有动作
				if (group.actions && Array.isArray(group.actions)) {
					group.actions.forEach(action => {
						if (action && action.desc && action.desc.docs) {
							actionsArray.push(action.desc.docs); // 添加动作描述
						}
					});
				}

				// 将该组及其动作添加到结果中
				result[groupKey] = actionsArray;
			}
		});

		console.log('处理后的分组数据:', result);
		return result;
	};

	// 根据传入的itemData确定当前活动的组和动作，无接口调用
	const determineActiveNodes = (data) => {
		if (!data || !data.status) return;

		// 重置已完成动作列表
		completedActions.value = [];

		// 如果数据中包含已完成的动作列表，则应用它
		if (data.status.completedActions && Array.isArray(data.status.completedActions)) {
			completedActions.value = [...data.status.completedActions];
		}

		// 确定当前活动组
		if (data.status.activeGroup) {
			activeGroup.value = data.status.activeGroup;
		} else if (Object.keys(groupsData).length > 0) {
			// 如果没有指定，默认第一个组为活动组
			activeGroup.value = Object.keys(groupsData)[0];
		}
		console.log('data.status.activeAction:', data.status.activeAction);
		// 确定当前活动动作
		if (data.status.activeAction) {
			activeAction.value = data.status.activeAction;
		} else if (activeGroup.value && groupsData[activeGroup.value] && groupsData[activeGroup.value].length > 0) {
			// 如果没有指定，默认该组的第一个动作为活动动作,如果没有指定则没有默认，根据后面运行来确定哪个在运行
			// activeAction.value = groupsData[activeGroup.value][0];
		}
	};

	// 根据传入的itemData进行处理
	const processItemData = (data) => {
		if (!data) return;

		// 处理并提取分组数据
		const processedGroups = processGroupsData(data);

		// 调试输出status结构
		console.log('传入的完整data：', data);
		console.log('data.status结构：', data.status);
		console.log('data.status?.groups：', data.status?.groups);

		// 尝试从不同位置获取groups数据
		let groupsArray = null;
		if (Array.isArray(data.status?.groups)) {
			groupsArray = data.status.groups;
		} else if (data.status?.groups && typeof data.status.groups === 'object') {
			// 如果groups是对象，转为数组
			groupsArray = Object.values(data.status.groups);
		} else if (data.spec?.groups && Array.isArray(data.spec.groups)) {
			// 备选：从spec.groups获取
			groupsArray = data.spec.groups;
		}

		// 确保groupResponse是一个数组
		groupResponse.value = groupsArray || [];
		console.log('设置后的groupResponse.value：', groupResponse.value);

		// 更新reactive数据，用于UI展示
		Object.keys(groupsData).forEach(key => {
			delete groupsData[key];
		});
		Object.assign(groupsData, processedGroups);


		// 确定当前活动的组和动作
		determineActiveNodes(data);

		// 获取更详细的组动作数据
		if (groupResponse.value.length > 0) {
			getActionPhase();
		}

		console.log('FlowDiagram处理数据完成:', {
			groups: Object.keys(groupsData),
			activeGroup: activeGroup.value,
			activeAction: activeAction.value,
			completedActions: completedActions.value
		});
	};
	let isGalaxea = ref(false)
	let baseURL = ref('http://192.168.8.191:8899/framework/v1')

	// 监听itemData变化，更新流程图
	watch(() => props.itemData, (newVal) => {
		if (newVal) {
			processItemData(newVal);
			if (newVal && newVal.spec && newVal.spec.desc && newVal.spec.desc.docs) {
      if (newVal.spec.desc.docs === '星海图&乐聚的检测和抓取') {
				isGalaxea.value = true
				baseURL.value = 'http://192.168.8.191:8899/framework/v1'
      } else {
        isGalaxea.value = false
				baseURL.value = 'http://192.168.1.199:8899/framework/v1'
      }
		}
		}
	}, {
		deep: true,
		immediate: true
	});

	onMounted(() => {
		// 初始化处理数据
		processItemData(props.itemData);

        // 启动状态自动更新
        startStatusUpdates();
	});

	onUnmounted(() => {
		// 清理定时器
		stopStatusUpdates();
	});

	// 更新动作状态的方法
	const updateActionStatus = async () => {
		console.log('定时更新动作状态...');

		// 如果没有actionsData数据，则不执行更新
		if (actionsDetailList.value.length === 0) {
			console.log('没有动作数据，跳过状态更新');
			return;
		}

		// 保存当前状态以便比较变化
		const previousPhases = { ...actionPhases.value };

		// 构建actionsData数组用于请求
		const actionsData = actionsDetailList.value.map(action => ({
			Name: action.name,
			Namespace: action.namespace
		}));

		try {
			// 单独处理每个action，而不是一次获取所有
			for (const actionData of actionsData) {
				const params = {
					Name: actionData.Name,
					Namespace: actionData.Namespace
				};

				// 调用API获取最新状态
				const response = await api.getActionsData({ params }, baseURL.value);

				if (response.data && response.data.spec?.desc?.docs && response.data.status?.phase) {
					const actionName = response.data.spec.desc.docs;
					const phase = response.data.status.phase;

					// 仅当状态有变化时更新
					if (actionPhases.value[actionName] !== phase) {
						console.log(`动作 [${actionName}] 状态变化: ${actionPhases.value[actionName] || '未知'} -> ${phase}`);
						actionPhases.value[actionName] = phase;

						// 处理状态变化的逻辑
						if (phase === 'Running') {
							activeAction.value = actionName;
							// 找到所属组并设置为活动组
							// 这部分逻辑可以保留不变...
						} else if (phase === 'Successed' && !completedActions.value.includes(actionName)) {
							completedActions.value.push(actionName);
						}
					}
				}
			}
		} catch (error) {
			console.error('更新动作状态失败:', error);
		}
	};

	// 启动定时更新
	const startStatusUpdates = () => {
		// 先清除可能存在的旧定时器
		if (statusUpdateTimer) {
			clearInterval(statusUpdateTimer);
		}

		// 设置新的定时器，定期调用updateActionStatus
		statusUpdateTimer = setInterval(updateActionStatus, UPDATE_INTERVAL);
		console.log(`已启动状态自动更新，间隔: ${UPDATE_INTERVAL/1000}秒`);
	};

	// 停止定时更新
	const stopStatusUpdates = () => {
		if (statusUpdateTimer) {
			clearInterval(statusUpdateTimer);
			statusUpdateTimer = null;
			console.log('已停止状态自动更新');
		}
	};
</script>

<style scoped>
	.flow-diagram-container {
		width: 100%;
		height: 100%;
		min-height: 20vh;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 4px;
		overflow-y: auto;
		background: none;
		border-radius: 0;
		border: none;
	}

	/* 垂直流程图样式 */
	.vertical-workflow-chart {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		border: none;
	}

	/* 节点基本样式 */
	.node {
		padding: 0.6vh 1vh;
		border-radius: 4px;
		color: white;
		text-align: center;
		font-size: 1.2vw;
		font-weight: 500;
		min-width: 10vh;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
		position: relative;
	}

	/* 组节点容器 */
	.workflow-groups {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	/* 组块 - 包含节点和箭头 */
	.group-block {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-bottom: 1px;
		border: none;
	}

	/* 组节点基础样式 - 透明背景 */
	.group-node {
		background-color: transparent;
		border: 1px solid rgba(0, 0, 0, 0.1);
		width: 60%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0.6vh 0.8vh;
		transition: all 0.3s ease;
		color: #333; /* 文字颜色改为深色，因为背景是透明的 */
		text-align: left; /* 组名文本左对齐 */
	}

	/* 已完成节点样式 - 透明背景 */
	.completed-node {
		background-color: transparent;
		border: 1px solid rgba(0, 0, 0, 0.15);
	}

	/* 活动节点样式 - 透明背景，添加细微边框效果 */
	.active-node {
		background-color: transparent;
		border: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: none;
	}

	/* 等待执行节点样式 - 透明背景 */
	.pending-node {
		background-color: transparent;
		border: 1px solid rgba(0, 0, 0, 0.1);
	}

	/* 动作列表 */
	.actions-list {
		margin-top: 4px;
		background-color: transparent;
		border-radius: 3px;
		padding: 3px;
		width: 90%;
		align-self: center; /* 让动作列表在组节点中居中 */
	}

	/* 动作项容器 - 包含动作和箭头 */
	.action-item-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 2px;
		width: 100%;
	}

	/* 动作项基础样式 */
	.action-item {
		width: 100%;
		color: #222222;
		font-size: 1vw;
		padding: 0.2vh 0.4vh;
		border-radius: 2px;
		text-align: center;
		transition: all 0.3s ease;
	}

	/* 动作之间的箭头 */
	.action-arrow {
		margin: 2px 0;
		height: 12px;
		display: flex;
		justify-content: center;
	}

	/* 已完成动作 - 绿色 */
	.completed-action {
		background-color: rgba(82, 196, 26, 0.9);
	}

	/* 活动动作 - 红色 */
	.active-action {
		background-color: #f5222d;
		font-weight: bold;
		box-shadow: 0 0 4px rgba(245, 34, 45, 0.6);
	}

	/* 正在执行的动作 - 红色，静态效果，不闪烁 */
	.running-action {
		background-color: #f5222d; /* 与active-action完全相同 */
		font-weight: bold;
		box-shadow: 0 0 4px rgba(245, 34, 45, 0.6);
	}

	/* 待执行动作 - 灰色 */
	.pending-action {
		background-color: rgba(191, 191, 191, 0.7);
	}

	/* 无动作提示 */
	.no-actions {
		color: #999;
		font-size: 1vw;
		font-style: italic;
		text-align: center;
		padding: 2px;
	}

	/* 箭头 */
	.arrow-down {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 1.6vh;
		margin: 1px 0;
	}

	/* 无数据提示 */
	.no-data-message {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 12vh;
		width: 100%;
		color: #999;
		font-style: italic;
	}

	/* 加载状态样式 */
	.loading-spinner {
		border: 3px solid #f3f3f3;
		border-top: 3px solid #bfbfbf;
		border-radius: 50%;
		width: 2.4vh;
		height: 2.4vh;
		animation: spin 1s linear infinite;
		margin-bottom: 0.8vh;
	}

	.loading-text {
		font-size: 1.2vw;
		color: #fff;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style>